<template>
  <div
    class="layout h100 animate__animated"
    :class="{ animate__zoomIn: animateIn }"
  >
    <div class="layout-side h100">
      <SysInfoPanel></SysInfoPanel>
    </div>
    <div class="layout-main">
      <WorldPanel ref="WorldPanel"></WorldPanel>
      <SySMenuPanel @startBattle="startBattleByData"></SySMenuPanel>
      <OnlinePlyaers></OnlinePlyaers>
      <ExitConfirm></ExitConfirm>
      <UpdateLog></UpdateLog>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, nextTick, onMounted, ref } from "vue";
import SysInfoPanel from "./Components/sysInfoPanel.vue";
import WorldPanel from "./Components/worldPanel.vue";
import SySMenuPanel from "./Components/sysMenuPanel.vue";
import OnlinePlyaers from "./Components/onLinePlayers.vue";
import UpdateLog from "./Components/updateLog.vue";
import { useStore } from "@/store";
import { SysInfo } from "@/const/sys";
import { SysActionTypes } from "@/store/sys/action-types";

const store = useStore();

export default defineComponent({
  components: {
    SysInfoPanel,
    WorldPanel,
    SySMenuPanel,
    OnlinePlyaers,
    UpdateLog
  },
  setup() {
    const animateIn = ref(true);
    const WorldPanel = ref();
    onMounted(() => {
      store.dispatch(
        SysActionTypes.SYS_PUSH_INFO,
        new SysInfo(`${store.state.userInfo.userName}，欢迎你，勇士！`, 3)
      );
    });
    const startBattleByData = (row: any, option: any) => {
      nextTick(() => {
        WorldPanel.value?.startBattleByData(row, option);
      });
    };
    return {
      animateIn,
      startBattleByData,
      WorldPanel
    };
  }
});
</script>
<style lang="scss" scoped>
.layout {
  background: #000000;
  display: flex;
  .layout-side {
    width: 40%;
    max-width: 500px;
    min-width: 200px;
    overflow: hidden;
  }
  .layout-main {
    flex: 1;
    position: relative;
  }
}
</style>
